<template>
  <div class="blogEdit_box">
    <el-page-header @back="goBack" content="主页"> </el-page-header>

    <el-form ref="orderForm" :model="orderForm" :rules="rules" label-width="70px" class="demo-ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input v-model="orderForm.title"></el-input>
      </el-form-item>

      <el-form-item label="分类" prop="classify">
        <el-select v-model="orderForm.classify" placeholder="请选择">
          <el-option
            v-for="(item, index) in classList"
            :key="index"
            :label="item"
            :value="index"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input
          type="textarea"
          rows="3"
          maxlength="254"
          show-word-limit
          v-model="orderForm.content"
        ></el-input>
      </el-form-item>

      <el-form-item label="qq" prop="qq">
        <el-input v-model.number="orderForm.qq"></el-input>
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input maxlength="11" v-model.number="orderForm.phone"></el-input>
      </el-form-item>

      <el-form-item label="地址" prop="address">
        <el-input v-model="orderForm.address"></el-input>
      </el-form-item>

      <el-form-item prop="time" label="时间" required>
        <el-date-picker type="datetime" placeholder="请选择日期和时间" v-model="orderForm.time" value-format="yyyy-MM-dd HH:mm" style="width: 100%;"></el-date-picker>
      </el-form-item>

      <el-form-item label="酬劳(¥)" prop="price">
        <el-input v-model.number="orderForm.price"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editArticle">
          <span>立即创建</span>
        </el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      orderForm: {
        title: '',
        classify: '',
        content: '',
        qq: '',
        phone: '',
        address: '',
        time: '',
        price: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        classify: [
          { required: true, message: '请选择类别', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请填写内容', trigger: 'blur' },
          { min: 1, max: 254, message: '字数超过限制，最多 254 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择日期和时间', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入酬劳（¥）', trigger: 'blur' },
          { type: 'number', message: '酬劳必须为数字值'}
        ],
      },
      // 分类列表
      classList: [
        '楼栋服务',
        '代拿/买',
        '其他互助'
      ]
    }
  },
  methods: {
    // 新建订单
    async editArticle () {
      const that = this
      if (!(this.orderForm.phone === '' || /^1[1356789]\d{9}$/.test(this.orderForm.phone))) {
        that.$message.error('手机号格式错误!');
        return false;
      }
      if (!(this.orderForm.qq === '' || /^[1-9]{5}\d*$/.test(this.orderForm.qq))) {
        that.$message.error('QQ号格式错误!');
        return false;
      }
      this.$refs['orderForm'].validate((valid) => {
        if (valid && this.orderForm.time !== '') {
          const { data: res } = that.$http.get('/help/nav/addOrder', {
            params:{
              oid: 0,
              uid: localStorage.getItem("userId"),
              title: this.orderForm.title,
              classify: this.orderForm.classify,
              content: this.orderForm.content,
              qq: this.orderForm.qq,
              phone: this.orderForm.phone,
              address: this.orderForm.address,
              time_temp: this.orderForm.time,
              price: this.orderForm.price
            }
          },{
            emulateJSON:true
          })
          if (res !== undefined) {
            window.location.href = "http://malloc.press:9000/user/nav/toLogin"
          }
          that.$message({
            message: '发布订单成功!',
            type: 'success'
          });
          setTimeout(() => {
            this.$router.push('/home')
          }, 1000)
        } else {
          that.$message.error('请将所需必要内容按要求填写后再重新提交!');
          return false;
        }
      });
    },
    // 返回事件
    goBack () {
      this.$router.push('/home')
    },
  },
  created() {
    this.orderForm.phone = localStorage.getItem("phone")
    this.orderForm.qq = localStorage.getItem("qq")
  }
}
</script>

<style lang="less" scoped>
.blogEdit_box {
  padding: 2% 5%;
  .el-page-header {
    margin-bottom: 3%;
  }
  .content_edit {
    z-index: 1;
    min-height: 600px;
  }
}
</style>
